<template>
    <div class="wrapper wallet">
        <mt-header title="DLB" fixed class="no-bg-fff">
            <mt-button icon="back" slot="left" @click="$router.push('/account')"></mt-button>
        </mt-header>
        <div class="banner">
            <img src="http://47.75.99.213/app/cdn/wallet-bg.png">
		    <div class="money">{{data.dlbCount}}</div>
        </div>
        <div class="list">
            <mt-cell title="可用" is-link  @click.native="$router.push('/account/wallet/usable')">
                <span>{{data.availableDlb}}</span>
            </mt-cell>
            <mt-cell title="解锁中" is-link @click.native="$router.push('/account/wallet/unlock')">
                <span>{{data.unlockDlb}}</span>
            </mt-cell>
            <mt-cell title="已锁定" is-link @click.native="$router.push('/account/wallet/lock')">
                <span>{{data.lockDlb}}</span>
            </mt-cell>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data:{}
        };
    },
    mounted(){
        this.getWallet();
    },
    methods: {
        getWallet(){
            this.$store.dispatch('GetWalletInfo').then((res) => {
                if( res.code == 200 ){
                    this.data = res.data;
                }
            })
        }
    }
};
</script>

<style lang="stylus" scoped>
.wrapper{
    .banner{
        position: relative;
        .money {
            position: absolute;
            top: 50%;
            width: 100%;
            text-align: center;
            font-size:34px;
            color: rgba(255,255,255,1);
        }
    }
}
</style>